<template>
  <div class="container">
   
    <div class="title">
      <img src="../assets/wyy1logo.jpg" alt="" />
      <p>网易云音乐</p>
    </div>
    <van-notice-bar
      scrollable
      left-icon="flower-o"
      text="希望大家使用emo云不要emo,开开心心的听歌"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '手机号' }]"
      />
      <van-field
        v-model="captcha"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px" class="btn">
        <van-button round block type="danger" @click="getCaptcha"
          >获取验证码</van-button
        >
        <van-button round block type="danger" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { sendCaptcha, login } from "@/request/api";
export default {
  name: "LoginVue",
  data() {
    return {
      phone: "",
      captcha: "",
      profile: {},
    };
  },
  methods: {
    // 登录
    async onSubmit() {
      const { data: res } = await login({
        phone: this.phone,
        captcha: this.captcha,
      });

      if (res.code !== 200) return this.$toast("登录失败");

      //登录成功
      let { token, profile } = res;
      // console.log(profile);
      window.localStorage.setItem("token", token);
      // console.log(this.profile);
      // this.$store.commit('GETUSERINFO',profile)
      // let profileStr = JSON.stringify(profile)
      // window.localStorage.setItem("profile", JSON.stringify(profile));
      // this.$store.commit('profile',profile)
      this.$store.state.profile = profile;
      console.log("@", this.$store.state.profile);
      window.localStorage.setItem("profile", JSON.stringify(profile));
      this.$router.push("/user");
    },
    async getCaptcha() {
      console.log(this.phone);
      const { data: res } = await sendCaptcha({ phone: this.phone });
      console.log(res);
      if (res.code === 200) return this.$toast("发送成功");
    },
    onClickLeft(){
      this.$router.go(-1)
    }
  },
};
</script>

<style lang="less" scoped>
.van-form {
  padding: 0 3%;
}
.btn {
  display: flex;
  // justify-content: space-between;
}
.title {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #fff;
  height: 100px;
  font-weight: 500;
  background-color: rgb(212, 60, 51);
  padding: 0 10px;
  img {
    width: 50px;
    // background-color: red;
    border-radius: 20px;
    margin-right: 10px;
  }
}
</style>